<template>
	<view class="content">
		<u-navbar title="红包记录" :placeholder='true' height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>
		<view class="filtrate">
			<search-button-input></search-button-input>
		</view>
		<u-modal :show="refshow" :showCancelButton="true" @confirm="confirmRef" title="提示" @cancel="refId='';refshow=false"
			:content='refcontent'></u-modal>
		<view class="record_content">
			<view class="item_top" @click="reissueRed">
				一键重发
			</view>
			<template v-for="(item,index) in redPacketList">
				<view class="record_item" :key="index">
					<view class="item_center">
						<view class="left">
							<view class="name">
								{{item.name}}
							</view>
							<view class="tel">
								{{item.phone}}
							</view>
							<view class="tel" style="padding-left: 20rpx;">
								&nbsp;&nbsp; ￥{{item.redAmount.toFixed(2)}}
							</view>
						</view>
						<view class="status">
							{{item.status==1 ?"已领取":'已退款'}}
						</view>
					</view>
					<view class="item_bottom">
						<view class="time">
							发送时间：{{item.redCreateTime}}
						</view>
						<view class="refund" v-if="item.status==1" @click="redRefundFun(item.redId)">
							退款
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		memberList,
		memberInfo,
		redPacket,
		redenvelopes,
		redRefund,
		giveRed
	} from '../../../api/employee.js'
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				delModel_show: true,
				inpCustomStyle: {
					border: 0,
					'border-radius': '10rpx',
					'background-color': '#f3f3f3',
					'box-sizing': 'border-box',
					padding: '20rpx 30rpx',
					color: "#D4D4D4"
				},
				radiolist1: [{
						name: '1.88金额',
						disabled: false
					},
					{
						name: '2.88金额',
						disabled: false
					},
					{
						name: '2元红包',
						disabled: false
					},
				],
				radiovalue1: '苹果',
				redPacketList: [],
				refcontent: '是否确认退款',
				refshow: false,
				refId: ''
			}
		},
		created() {
			this.getRedPacket()
		},
		methods: {
			async reissueRed() {
				const reds = this.redPacketList.map(item => {
					return {
						userIds: [item.id],
						employeeId: item.employeeId,
						redAmount: item.redAmount.toFixed(2),
						remark: item.remark
					}
				})
				reds.forEach(async item => {
					const res = await redenvelopes(item)
					console.log(res);
				})

			},
			redRefundFun(id) {
				this.refshow = true
				this.refId = id
				console.log(this.refId);
			},
			async confirmRef() {
				const res = await redRefund(this.refId)
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						icon: 'error',
						title: '退款失败'
					})
					return
				}
				uni.showToast({
					title: '退款成功'
				})
				this.refshow = false
				this.getRedPacket()
			},
			async getRedPacket() {
				const res = await redPacket()
				console.log(res);
				if (res.code != 200) {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
					return
				}
				const then = this
				this.redPacketList = []
				res.rows.forEach((item, index) => {
					(async function() {
						let member = await memberInfo(item.userId)
						then.redPacketList.push({
							...item,
							...member.data,
							redCreateTime: item.createTime,
							redId: item.id
						})
					}())
					// console.log(this.redPacketList);
				})
			},

			checkboxChange(n) {
				console.log(n);
			},
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.filtrate {
			background-color: #fff;

		}

		.record_content {
			padding: 20rpx;

			.item_top {
				width: 200rpx;
				height: 44rpx;
				background: #FF594D;
				border-radius: 79rpx 79rpx 79rpx 79rpx;
				color: #fff;
				text-align: center;
				line-height: 44rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 20rpx;
			}

			.record_item {
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 24rpx 20rpx;
				margin-bottom: 20rpx;

				.item_center {
					display: flex;
					justify-content: space-between;
					padding: 0 0 20rpx;

					.left {
						display: flex;
						align-items: center;

						.name {
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							color: #333332;
							padding-right: 20rpx;
						}

						.tel {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #777777;
						}
					}

					.status {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
						padding-right: 17rpx;
					}
				}

				.item_bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.time {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #777777;
					}

					.refund {
						width: 120rpx;
						height: 44rpx;
						border-radius: 222rpx;
						box-sizing: border-box;
						line-height: 44rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #F44236;
						border: 2rpx solid #FF594D;
						text-align: center;
					}
				}
			}
		}


	}
</style>